<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>佳家文件</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #f3f0f0;
        }

        .container {
            width: 80%;
            height: 100%;
            margin: 0 auto;
            background: #fff;
            box-sizing: border-box;
            padding: 0 20px;
        }

        h2 {
            text-align: center;
            line-height: 100px;
        }
        .btns{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>您好，欢迎访问家佳文件！</h2>
    <div class="btns">
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传文件
        </button>
    </div>
    <table id="demo" lay-filter="records"></table>

</div>


<script src="layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/file/list' //数据接口
            ,request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 200, fixed: 'left'}
                , {field: 'filename', title: '文件名称',width: 200}
                , {field: 'url', title: '文件地址'}
                , {field: 'gmtCreate', title: '上传时间',width: 200}
            ]]
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.records //解析数据列表
                };
            }
        });

    });
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '/file/upload' //上传接口
            ,accept: 'file'
            , done: function (res) {
                layer.msg(res.msg);
                setInterval(()=>{
                    window.location.reload();
                },500)
            }
            , error: function (err) {
                layer.msg("上传失败，请登录");
            }
        });
    });
</script>
</body>
</html>